import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
import { useHistory } from "react-router";
import axios from "axios";
// import cookie from "react-cookies";
interface MusicInfoState {
  ava: any;
  musicName: any;
  musicCreator: any;
  data: any;
  time: any;
  songUrl: any;
}

const initialState: MusicInfoState = {
  ava: "",
  musicName: "",
  musicCreator: "",
  data: "",
  time: "",
  songUrl: "",
};

export const getMusicInfo = createAsyncThunk(
  "music/MusicInfo",
  async (
    paramaters: {
      id: string;
    },
    thunkAPI
  ) => {
    const { data } = await axios.post(
      `http://localhost:3000/song/detail?ids=${paramaters.id}`
    );
    return data.songs[0];
  }
);
export const getSongUrl = createAsyncThunk(
  "user/songurl",
  async (
    paramaters: {
      id: any;
    },
    thunkAPI
  ) => {
    const { data } = await axios.get(
      `http://localhost:3000/song/url?id=${paramaters.id}`
    );
    return data;
  }
);
export const musicInfoSlice = createSlice({
  name: "userDetail",
  initialState,
  reducers: {},

  extraReducers: {
    [getMusicInfo.fulfilled.type]: (s, a) => {
      s.ava = a.payload.al["picUrl"];
      s.musicName = a.payload["name"];
      s.data = a.payload;
      s.musicCreator = a.payload.ar[0]["name"];
      s.time = a.payload["time"];
    },
    [getSongUrl.fulfilled.type]: (s, a) => {
      s.songUrl = a.payload.data[0]["url"];
    },
  },
});
